<template>
  <canvas ref="canvas"></canvas>
</template>

<script setup>
import { onMounted, ref } from '@vue/runtime-core'
import * as PIXI from 'pixi.js'

const canvas = ref(null)

onMounted(() => {
  const app = new PIXI.Application({
    view: canvas.value,
    width: 600,
    height: 600,
    backgroundColor: 0x000000
  })
  
  const realPath = new PIXI.Graphics()
  realPath.lineStyle(5, 0xFFFFFF, .5)
  realPath.moveTo(0, 0)
  realPath.lineTo(100, 200);
  realPath.lineTo(200, 200);
  realPath.lineTo(240, 100);

  realPath.position.x = 50;
  realPath.position.y = 50;

  const mask = new PIXI.Graphics()
  realPath.mask = mask

  mask.beginFill()
  mask.drawRect(50, 50, 100, 100)
  mask.endFill()

  app.stage.addChild(realPath)

  // // ARC 3 ////
  const arc3 = new PIXI.Graphics()
  arc3.lineStyle(6, 0x0000ff, 1)
  arc3.arc(300, 300, 60, 2 * Math.PI, Math.PI * 1.5);
  app.stage.addChild(arc3)

})
const msg = 'Hello Container fast' 
</script>

<style>

</style>